<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <!-- import CSS -->
    <link rel="stylesheet" href="css/element.css">
    <style>
        #app {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            margin: 0;
            box-sizing: border-box;
        }
        .login-title {
            text-align: center;
        }
        .login-input {
            width: 200px;
        }
        .login-error-msg {
            color: red;
            padding-left: 10px;
            width: 1px;
            white-space: nowrap;
        }
    </style>
    <!-- import JavaScript -->
    <script src="js/axios.min.js"></script>
    <script src="js/des.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/elemnet.full.js"></script>
    <title>登录</title>
</head>

<body>
    <div id="app">
        <el-form v-loading="isLoading" class="login-form" :model="form" label-width="100px">
            <h1 class="login-title">广大打卡登录</h1>
            <el-form-item label="账号">
                <el-input class="login-input" v-model.trim="form.username"/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input class="login-input" v-model.trim="form.password" type="password" show-password/>
            </el-form-item>
            <el-form-item label="自动打卡">
                <el-checkbox v-model="form.isAutoClick"></el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
            <span class="login-error-msg">{{ errMsg }}</span>
        </el-form>
    </div>

    <script src="login.js"></script>
</body>

</html>